<template>
  <Modal v-model="open" :closeOnMask="false" hasDivider hasCloseIcon>
    <div slot="header">字典管理</div>
    <div style="width: 300px">
      <Form :model="form" :rules="rules" ref="form">
        <FormItem label="名称" prop="name">
          <input type="text" v-model="form.name"/>
        </FormItem>
        <FormItem label="排序" prop="rank">
          <NumberInput  v-model="form.rank"/>
        </FormItem>
        <FormItem label="编码" prop="sn">
          <input type="text" v-model="form.sn" :readonly="form.type=='dict'&&form.id"/>
        </FormItem>
      </Form>
    </div>
    <div slot="footer">
      <Button @click="open=false">取消</Button>
      <Button :loading="loading" color="primary" @click="saveOrUpdate">确认</Button>
    </div>
  </Modal>
</template>
<script>
import {DataSource, ajax, util} from 'framework'

export default {
  name: 'DictionaryDialog',
  props:{
    dictType:String
  },
  data: function () {
    return {
      open: false,
      loading: false,
      isAdd: false,
      form: {
        id: null,
        name: null,
        rank: null,
        sn: null,
        type: null,
      },
      //验证规则
      rules: {}
    }
  }, methods: {
    show(primary) {
      this.loading = true
      util.clean(this.form)
      if (primary) {//show edit
        this.isAdd = false
        ajax.get("dictionary/detail", primary).then(r => {
          this.form = r.data
          this.loading = false;
          this.open = true;
        })
      } else {
        this.isAdd = true
        //show add
        this.form.type=this.dictType

        this.open = true
        this.loading = false
      }
    },
    saveOrUpdate() {
      var validResult = this.$refs.form.valid();
      if (validResult.result) {
        this.loading = true
        ajax.post(this.isAdd ? 'dictionary/add' : 'dictionary/save', this.form).then(r => {
          this.open = false;
          this.$Message("已保存")
          this.$emit("change", r.data)
        }).catch(e => {
          this.loading = false
         // this.$Message(e.message)
        })
      }
    }
  }
}
</script>
